import React, {Component, createContext} from 'react';

// let {Consumer} = createContext();
import GrandParentContext from "../utils/GrandParentContext";

class Grandson extends Component {

  //向上级找 Provider
  static contextType = GrandParentContext;

  listenFocus() {
    console.log('获取到焦点')
  }

  listenBlur() {
    console.log('失去焦点');
  }

  render() {
    return (
      <div>

        <GrandParentContext.Consumer>
          {
            (store) => {
              return <div>
                <h3>{store.name}</h3>
                <h3>{store.age}</h3>
              </div>
            }
          }

        </GrandParentContext.Consumer>

        <div>
          <h3>姓名:{this.context.name}</h3>
          <h3>年龄:{this.context.age}</h3>
          <button onClick={()=>{
            this.props.toChild('爷爷 救我');
          }}>传递到外层组件</button>
        </div>

        <div>
          onKeyDown
          <input type="text" onFocus={this.listenFocus} onBlur={this.listenBlur} onKeyDown={(event)=>{
            console.log(event.keyCode);
          }}/>
        </div>
      </div>
    );
  }
}

export default Grandson;
